3D Model Design Process

March 21, 2023

Updated: March 21, 2023

Purpose

Allow the user to change the shape size using Three.js as the backend of the shape and the size differences to be changed and inputted.

Design Process

During my internship at Tesla, one of my coworkers proposed the idea of adding 3D modelling into my website. Although, it was hard at the beginning because I was balancing work, research, and Texas Guadaloop during the day, I finally got the chance to do it during Spring Break. Here is the product: click here.

Overview Process

Goal: Input a 3D model into the website

  1. Learn about three.js from its animation and the backend of pushing the code for UI (user-interface) could see the animation.
  2. Get a free 3D model to apply knowledge
  3. Put 3D model on website
  4. Animate the 3D model on the website

Knowledge/Research (Started: March 21, 2023)

Day 1
  • Applied three.js by adding NPM (Node Package Manager) by installing node.js
  • **Note: Remember to restart Visual Studio Code after installing node.js (or the code won't work).
Challenges: Day 1
  • Three.js wasn't reading.

    •   The code wasn't loading when the code was using script command. I tried to debug and noticed the code wasn't going through the command. The website had a black placeholder for where the animation was located. I tried to adjust the light/camera, but that didn't work.

Applied Knowledge (Started: June 12-13, 2023)

Day 2
  • Researched other ways to implement a 3D model into the website: model-viewer
  • Find a .glb 3D model file or convert a file to a .glb and was free for the public

    •   Later, I found a Baymax as a .glb file, but that didn't work as the .obj wasn't a smooth surfaces and had additional subfolders for its skin. I had converted a Wall-E that was a .rar file, but later found a .glb file of Wall-E. The Wall-E was there, but it didn't work as it was too big of a file for the website to be converted. I used a smaller Wall-E file for it to work.

Challenges: Day 2
  • model-viewer only supported .glb files
  • Baymax had too many subfolders for website to output the correct look for Baymax.
  • File size for Wall-E

The Wall-E was my first animation on this website that worked!

Day 3 (LET'S ANIMATE!)

Thoughts: I wanted to then make the 3D model as animated like three.js model. After, some searching on Google and three.js, I found that I can use model-viewer to animate a 3D Model on the website

  • Researched how to animate in model-viewer
  • Figured out: an animation software Mixamo to animate 3D models.

    •   I want to try Mixamo but the files import wasn't the correct type, too big, or couldn't find the skeleton for the 3D model. The control the .glb files to Mixamo and export it as a .glb. Mixamo only accepts .fbx, .obj, and .zip, so I would have to convert to a .glb for model-viewer

  • Found a website with a 3D dinosaur model animation
  • UI to have a boarder (later didn't like it) and added buttons by combining logic in model-viewer from the three.js website and examples in the documentation of the model-viewer and three.js websites.

    •   The user can control the dinosaur's animation. I also want to slider to used as a speed and button of types of animations.The Wall-E and some of the files were too big to push to GitHub, so I took some of the files out. I decided to push it from the GitHub desktop app. I took the environment-image that was JurassicPark and forgot that it was the background that made the skin, so when I pushed the website the dinosaur was black for a bit. It took me 30 mins to figure it out until I went to model-viewer website and saw the environment-image command and remembered that it was how the dinosaur got the skin. It is 4:04 am now.

Challenges: Day 3
  • model-viewer can animate if the .glb file and 3D model already have an animation already in the file. Solution: Mixamo

Skills Learned

  • model-viewer and three.js
  • 3D model in websites
  • Animating 3D model for UI

Improvements and Challenges

  • Animate and input my own 3D model
  • Apply the dinosaur's skin. The dinosaur has a skin color, but somehow the skin isn't showing up. The texture is shown, but not the skin.
  • Allow the slider to have more drastic changes in speed of the dinosaur's animation
  • The Wall-E file was too big, so need to a have smaller file for it to be pushed.

Overall Thoughts

I always love to create, explore, and innovate on designs and especially 3D designs. It was amazing to find out and apply these 3D models into code after one of my coworkers at Tesla suggested it. I think that the three.js isn't working because other .js files in the html code that overrides the three.js inputting the animation into the website. It was cool to see inspiration from three.js and model-viewer website and apply those examples into the code and see my imagination come to life on the website. From my internship with Tesla, I learned to take big projects like this one and break it down to smaller steps. Day 1 and 2: I wanted to just apply a simple 3D model like Wall-E without animations to see if it worked. Day 3: I wanted to take it a step further after I saw the 3D model working with inputting animations.

Moral of the story: “Thank you, coffeee and sleep and the internet and hope to further improve the website.”